@import "./basics.scss";
// 镜头旋转效果

.box {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent,
      orange,
      transparent
    ); // 增加遮罩蒙版 中间的颜色不重要
    /* -webkit-mask-repeat: no-repeat; */
    /*
    ...省略
    */
}

// 呼吸灯效果

@keyframes breath_light {
    0% {
        filter: brightness(100%);
    }
    50% {
        filter: brightness(220%);
    }
    100% {
        filter: brightness(100%);
    }
}

// 扫描效果
@mixin VFX-dynamic-scan($color:#00ffff,$time:2s){
    @include enclosure-box;
    &::after{
        top: 0;
        left: 0; 
        width: 30%;
        height: 100%;
        background-image: linear-gradient(to right, transparent 0%, $color 100%);  
        z-index: -10;
        animation: VFX-dynamic-scan $time infinite linear;
        opacity: 0.7;
    }
    /* 定义一个从左向右的扫描动画 */
    @keyframes VFX-dynamic-scan {
        0% {
            opacity: 0.7;
        }
        100% {
            width: 100%;
            // left: 100%;
            // opacity: 0.3;
        }
        // 100% {
        //     // right: -10px;
        //     // opacity: 0;
        // }
    }
}

// 动态填充效果
@mixin VFX-dynamic-fill($color:#00ffff,$time:2s,$option:0%){
    @include enclosure-box;

    position: relative;
    overflow: hidden;
    mix-blend-mode: overlay; // 增加颜色混合模式
    mask-image: linear-gradient(160deg, orange 80%, transparent 80%); // 增加遮罩蒙版
    &::after{
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        left: 0; 
        width: 30px;
        height: 100%;
        background-image: linear-gradient(to right, transparent 0%, $color 0%);  
        z-index: 0;
        animation: VFX-dynamic-fill $time infinite linear;
        opacity: 0.7;
    }
    /* 定义一个从左向右的扫描动画 */
    @keyframes VFX-dynamic-fill {
        0% {
            opacity: 0.7;
        }
        100% {
            width: 100%;
            // left: 100%;
            // opacity: 0.3;
        }
        // 100% {
        //     // right: -10px;
        //     // opacity: 0;
        // }
    }
}
.container-title-scanning{
    @include VFX-dynamic-scan(rgb(4, 0, 255),1s);
}


/* 定义一个从左向右的扫描动画 */
@keyframes scanning {
    0% {
        opacity: 0.7;
    }
    100% {
        width: 100%;
        // left: 100%;
        opacity: 0.3;
    }
    // 100% {
    //     // right: -10px;
    //     // opacity: 0;
    // }
}

// 镜面反光效果
.header-light{
    width: 100%;
    height: 100%;
    position: relative;
    mask-image: linear-gradient(160deg, orange 80%, transparent 80%); // 增加遮罩蒙版
    mix-blend-mode: overlay; // 增加颜色混合模式
    &::after{
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        width: 126px;
        height: 95%;
        background-image: linear-gradient(126deg, transparent 30%, #dbf3fb 48%, #e4f9ff 50%, #f9f9f9 52%, transparent 70%); // 反光元素
        animation: scanning 5s infinite linear;
        opacity: 0.7;
    }
    // @keyframes scanning {
    //     0% {
    //         left: -20px; 
    //         opacity: 0;
    //     }
    //     10% {
    //         opacity: 0.7;
    //     }
    //     70% {
    //         opacity: 0.7;
    //     }
    //     80% {
    //         left: 90%;
    //         opacity: 0;
    //     }
    //     100% {
    //         right: 0px;
    //         opacity: 0;
    //     }
    // }
}